<template>
    <div class="outmain ba_f heighthv pad_20 bor_rad5">
        <div class="shuju_title mar_b20">
            <div class="shuju_title_text">
                <span>兑换记录</span>
            </div>
        </div>
        <div class="pad_20 flex-bet flex-y-top">
            <el-form :inline="true" :model="formInline" class="demo-form-inline searchform">
                <el-form-item label="手机号或商品名称">
                    <el-input v-model="formInline.keyword" size="medium" placeholder="请输入手机号或商品名称"
                              @input="onSearch"></el-input>
                </el-form-item>
                <el-form-item label="商品分类">
                    <el-select v-model="formInline.type" placeholder="请选择" @change="onSearch">
                        <el-option
                                v-for="item in labelOptions2"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="订单状态">
                    <el-select v-model="formInline.state" placeholder="请选择" @change="onSearch">
                        <el-option
                                v-for="item in labelOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSearch" size="medium">搜索</el-button>
                    <a :href="handelExport()" class="mar_l10"><el-button size="medium">导出</el-button></a>
                </el-form-item>
            </el-form>
        </div>
        <div class="tabledata mar_t20">
            <el-table :data="list"
                      v-loading="listLoading"
                      :element-loading-text="elementLoadingText"
                      stripe
                      style="width: 100%"
                      class="tablecenter">
<!--                <el-table-column prop="userName" label="兑换人"></el-table-column>-->
<!--                <el-table-column prop="outTradeNo" label="订单编号"></el-table-column>-->
                <el-table-column prop="goodsName" label="商品名称"></el-table-column>
                <el-table-column prop="type" label="商品类型">
                    <template slot-scope="scope">
                        <div v-if="scope.row.goodsType=='1'"><el-tag type="success" size="mini">实物商品</el-tag></div>
                        <div v-if="scope.row.goodsType=='2'"><el-tag size="mini">虚拟商品</el-tag></div>
                    </template>
                </el-table-column>
                <el-table-column prop="pay" label="兑换价格">
                    <template slot-scope="scope">
                        <div v-if="scope.row.score>0 && scope.row.money<=0">{{scope.row.score}}积分</div>
                        <div v-if="scope.row.money>0 && scope.row.score<=0">{{scope.row.money}}元</div>
                        <div v-if="scope.row.score>0 && scope.row.money>0">{{scope.row.score}}积分+{{scope.row.money}}元
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="convertNum" label="兑换数量">
                  <template slot-scope="scope">
                    <div>x{{scope.row.convertNum}}</div>
                  </template>
                </el-table-column>
                <el-table-column prop="createdAt" label="兑换时间"></el-table-column>
                <el-table-column prop="receinfo" label="取货方式">
                    <template slot-scope="scope">
                        <div><span v-if="scope.row.deliveryMode=='1'"><el-button type="primary" size="mini">快递配送</el-button></span><span
                          v-if="scope.row.deliveryMode=='2'"><el-button type="success" size="mini">到店自提</el-button></span></div>
<!--                        <div v-if="scope.row.deliveryMode=='2'">自提点：{{scope.row.receiveName}}/{{scope.row.receiveTel}}/{{scope.row.receiveAddress}}</div>-->
<!--                        <div v-if="scope.row.deliveryMode=='1'">配送地址：{{scope.row.receiveName}}/{{scope.row.receiveTel}}/{{scope.row.receiveAddress}}</div>-->
<!--                        <div v-show="scope.row.selfCode">自提码：{{scope.row.selfCode}}</div>-->
                    </template>
                </el-table-column>
                <el-table-column prop="state" label="状态">
                    <template slot-scope="scope">
                        <div v-if="scope.row.state=='2' && scope.row.selfCode ==null"><el-tag type="danger" size="mini">待发货</el-tag></div>
                        <div v-if="scope.row.state=='2' && scope.row.selfCode !=null"><el-tag type="danger" size="mini">待核销</el-tag></div>
                        <div v-if="scope.row.state=='3'"><el-tag size="mini">已发货</el-tag></div>
                        <div v-if="scope.row.state=='4'"><el-tag type="success" size="mini">已完成</el-tag></div>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width='220'>
                    <template slot-scope="scope">
                        <div class="textbutton">
                            <el-button type="text" @click="seeDetai(scope.row)">查看详情</el-button>
                            <el-button
                                    v-show="scope.row.selfCode ==null && scope.row.goodsType=='1' && scope.row.state=='2'"
                                    type="text" @click="modifyOrder(scope.row.id,1)" class="">发货
                            </el-button>
                            <el-button v-show="scope.row.selfCode !=null && scope.row.state=='2'" type="text"
                                       @click="modifyOrder(scope.row.id,2)" class="">核销
                            </el-button>
                            <el-button v-show="scope.row.state=='3'" type="text" class=""
                                       @click="deliver(scope.row.logisticsName,scope.row.logisticsCode)"> 查看
                            </el-button>
                            <el-button type="text" @click="print(scope.row.id)" class="">打印</el-button>
                            <el-button type="text" @click="modifyOrder(scope.row.id,3)" class="">删除</el-button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    background
                    layout="prev, pager, next"
                    :total="page.total"
                    :page-size="page.pagesize"
                    :current-page.sync='page.currentPage'
                    @current-change="handleCurrentChange">
            </el-pagination>
            <el-dialog title="编辑发货" :visible.sync="dialogTableVisible" :close-on-click-modal='false' width="600px"
                       class="fahuo">
                <el-form ref="form" :model="form">
                    <el-form-item label="物流名称" :label-width="formLabelWidth" :required='true' prop="logisticsName">
                        <el-input v-model="form.logisticsName" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="物流单号" :label-width="formLabelWidth" :required='true' prop="logisticsCode">
                        <el-input v-model="form.logisticsCode" auto-complete="off"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogTableVisible = false" class="dialogcancel">取 消</el-button>
                    <el-button type="primary" @click="dialogform(form)">确 定</el-button>
                </div>
            </el-dialog>
            <el-dialog title="订单核销" :visible.sync="dialogTableVisible2" :close-on-click-modal='false' width="600px"
                       class="fahuo">
                <el-form ref="form2" :model="form2">
                    <el-form-item label="自提码" :label-width="formLabelWidth">
                        <el-input v-model="form2.selfCode" auto-complete="off" :required='true'
                                  prop="selfCode"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogTableVisible2 = false" class="dialogcancel">取 消</el-button>
                    <el-button type="primary" @click="dialogform2(form2)">确 定</el-button>
                </div>
            </el-dialog>
            <edit ref="edit" @fetchData="fetchData"></edit>
        </div>
    </div>
</template>
<script>
    import {orderList, modifyOrder,integralPrint} from "@/api/plug";
    import index from '../../../api/index';
    import Edit from "./components/edit";

    export default {
      components: {Edit},
        created() {
            this.fetchData();
        },
        data() {
            return {
                formInline: {
                    keyword: '',
                    type: '',
                    state: '',
                },
                list: [],
                listLoading: true,
                selectRows: "",
                elementLoadingText: "正在加载...",
                page: {
                    total: 0,
                    size: 10,
                    currentPage: 1,
                },
                labelOptions: [
                    {
                        value: '0',
                        label: '全部'
                    },
                    {
                        value: '2',
                        label: '待发货'
                    }, {
                        value: '3',
                        label: '待收货'
                    },
                    {
                        value: '4',
                        label: '已完成'
                    },
                ],
                labelOptions2: [
                    {
                        value: "0",
                        label: "全部"
                    },
                    {
                        value: '1',
                        label: "实物商品"
                    },
                    {
                        value: '2',
                        label: "虚拟商品"
                    },
                ],
                formLabelWidth: '150px',
                dialogTableVisible: false,
                dialogTableVisible2: false,
                form: {
                    logisticsName: '',
                    logisticsCode: '',
                    type: '',
                    id: '',
                },
                form2: {
                    selfCode: '',
                },
            }
        },
        methods: {
            async fetchData() {
                this.listLoading = true;
                const {data, count} = await orderList({
                    page: this.page.currentPage,
                    keyword: this.formInline.keyword,
                    type: this.formInline.type,
                    state: this.formInline.state
                });
                this.list = data;
                this.page.total = count;
                this.listLoading = false;
            },
            handleCurrentChange(val) {
                this.page.currentPage = val;
                this.fetchData();
            },
            onSearch() {
                this.fetchData();
            },
            async modifyOrder(id, type) {
                if (id && type == 1) {
                    this.dialogTableVisible = true
                    this.form.id = id
                }
                if (id && type == 2) {
                    this.dialogTableVisible2 = true
                    this.form2.id = id
                }
                if (id && type == 3) {
                    this.$baseConfirm("你确定要删除当前项吗", null, async () => {
                        const {msg} = await modifyOrder({id, type: 3});
                        this.$baseMessage(msg, "success");
                        this.fetchData();
                    });
                }
            },
            async print(id){
                if(id){
                    const {msg} = await integralPrint({id,});
                    this.$baseMessage(msg, "success");
                    this.fetchData();
                }
            },
            dialogform() {
                this.$refs["form"].validate(async (valid) => {
                    if (valid) {
                        this.form.type = 1
                        const {msg} = await modifyOrder(this.form);
                        this.dialogTableVisible = false
                        this.$baseMessage(msg, "success");
                        this.fetchData();
                    } else {
                        return false;
                    }
                });
            },
            dialogform2() {
                this.$refs["form2"].validate(async (valid) => {
                    if (this.form2.selfCode) {
                        this.form2.type = 2
                        const {msg} = await modifyOrder(this.form2);
                        this.dialogTableVisible2 = false
                        this.$baseMessage(msg, "success");
                        this.fetchData();
                    } else {
                        this.$baseMessage('请输入核销码', "error");
                        return false;
                    }
                });
            },
            deliver($name, $code) {
                // location.href = "https://www.kuaidi100.com/chaxun?com=" + $name + "&nu=" + $code;
                window.open("https://www.kuaidi100.com/chaxun",'_blank')
            },
            // async changeSwitch(row) {
            //     const {msg} = await modifyCoupon({id: row.id, display: row.display, type: 1});
            //     this.$baseMessage(msg, "success");
            //     this.fetchData();
            // },
            handleDelete(row) {
                if (row.id) {
                    this.$baseConfirm("你确定要删除当前项吗", null, async () => {
                        const {msg} = await modifyOrder({id: row.id, type: 2});
                        this.$baseMessage(msg, "success");
                        this.fetchData();
                    });
                } else {
                    if (this.selectRows.length > 0) {
                        const id = this.selectRows.map((item) => item.id);
                        this.$baseConfirm("你确定要删除选中项吗", null, async () => {
                            const {msg} = await modifyOrder({id, type: 2});
                            this.$baseMessage(msg, "success");
                            this.fetchData();
                        });
                    } else {
                        this.$baseMessage("未选中任何行", "error");
                        return false;
                    }
                }
            },
            seeDetai(row){
              if (row.outTradeNo) {
                this.$refs["edit"].showEdit(row);
              }
            },
            handletj() {
                this.$router.push({path: 'deliverytongji'})
            },
            handleEdit(type) {
                if (type) {
                    this.$router.push(`/couponAdd?type=${type}`);
                } else {
                    this.$router.push({path: 'couponAdd'})
                }
            },
            handleEdit2(row) {
                if (row.id) {
                    this.$router.push(`/couponAdd?id=${row.id}&type=${row.type}`);
                } else {
                    this.$router.push({path: 'couponAdd'})
                }
            },
            handelExport(){
                let backendPath = index.backendPath
                return backendPath + "channel/integral-shop/order-list?export=1"+'&page='+this.page.currentPage+'&keyword='+this.formInline.keyword+'&state='+this.formInline.state+'&type='+this.formInline.type
            },
        }
    }
</script>
